import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';
import {HttpQueryParamsDto} from '../lunhui-web-front-dto/HttpQueryParamsDto';
import {environment} from '../../environments/environment';
import {HttpMethodEnum} from '../lunhui-web-front-utils/HttpMethodEnum';
import {HttpUtil} from '../lunhui-web-front-utils/HttpUtil';
import {ResponseBaseDto} from '../lunhui-web-front-dto/ResponseBaseDto';
import {BrowserUtils} from '../lunhui-web-front-utils/BrowserUtils';

@Component({
    selector: 'app-lunhui-web-front-login',
    templateUrl: './lunhui-web-front-login.component.html',
    styleUrls: ['./lunhui-web-front-login.component.scss']
})
export class LunhuiWebFrontLoginComponent implements OnInit {

    constructor() {
    }

    private account: string;
    private password: string;
    private passwordRepeat: string;

    // 重置按钮点击样式
    private static resetBtnStyle(target: EventTarget): void {
        $(target).addClass('clicked')
            .siblings().removeClass('clicked');
    }

    ngOnInit() {
        LunhuiWebFrontLoginComponent.setRegisterContent();
    }

    // 登录
    private login(event: MouseEvent): void {
        LunhuiWebFrontLoginComponent.resetBtnStyle(event.target);
        LunhuiWebFrontLoginComponent.loginNetWork(this.account, this.password);
    }

    // 注册
    private async register(): Promise<void> {
        if (!this.account || !this.password || !this.passwordRepeat) {
            $('#registerResult').css('color', 'red')
                .text('账户名或密码不能为空');

            return;
        }

        if (this.password !== this.passwordRepeat) {
            $('#registerResult').css('color', 'red')
                .text('密码不一致');

            return;
        }

        await LunhuiWebFrontLoginComponent.registerNetWork(this.account, this.password);
    }

    private showRegisterView(event: MouseEvent): void {
        LunhuiWebFrontLoginComponent.resetBtnStyle(event.target);

        LunhuiWebFrontLoginComponent.fadeInRegisterContent();

        $('#registerResult').text('');
    }

    private cancelRegister(): void {
        LunhuiWebFrontLoginComponent.fadeOutRegisterContent();
    }

    private static setRegisterContent(): void {
        const body = $('body');
        const registerContent = $('.registerContent');

        registerContent.css({
            left: body.width() / 2 - registerContent.width() / 2,
            top: body.height() / 2 - registerContent.height() / 2
        });
    }

    private static fadeInRegisterContent(): void {
        $('.registerContent').fadeIn();
    }

    private static fadeOutRegisterContent(): void {
        $('.registerContent').fadeOut();
    }

    private static async registerNetWork(accountStr: string, passwordStr: string): Promise<void> {

        const registerResult = $('#registerResult');
        const httpQueryParamsDto: HttpQueryParamsDto = new HttpQueryParamsDto();
        httpQueryParamsDto.url = `${environment.host}user/register?account=${accountStr}&password=${passwordStr}`;
        httpQueryParamsDto.method = HttpMethodEnum.POST;

        const resultData = await HttpUtil.query(httpQueryParamsDto) as ResponseBaseDto;

        if (resultData.success) {
            registerResult.css('color', 'green')
                .text('注册成功!');

            const timer: number = setTimeout(() => {
                LunhuiWebFrontLoginComponent.fadeOutRegisterContent();
                clearTimeout(timer);
            }, 1000);
        } else {
            registerResult.css('color', 'red')
                .text(resultData.errorMessage);
        }
    }

    private static async loginNetWork(accountStr: string, passwordStr: string): Promise<void> {

        const loginResult = $('#loginResult');
        const httpQueryParamsDto: HttpQueryParamsDto = new HttpQueryParamsDto();
        httpQueryParamsDto.url = `${environment.host}user/login?account=${accountStr}&password=${passwordStr}`;
        httpQueryParamsDto.method = HttpMethodEnum.POST;

        const resultData = await HttpUtil.query(httpQueryParamsDto) as ResponseBaseDto;

        if (resultData.success) {
            loginResult.css('color', 'green')
                .text('登录成功!');

            BrowserUtils.setCookie('token', resultData.result);

            setTimeout(() => {
                BrowserUtils.backToTarget('roseSelectView');
            }, 1000);
        } else {
            loginResult.css('color', 'red')
                .text(resultData.errorMessage);
        }
    }

}
